import { Button, ButtonGroup, Card, Space, Tooltip } from '@douyinfe/semi-ui';
import { IconDownloadStroked } from '@douyinfe/semi-icons';
import { useEffect, useMemo } from 'react';
import { usePageContext, useStoreContext } from './integral-context';
import IntegralFilter from './integral-filter';
import IntegralTable from './table/integral-table';
import { useNavigate } from 'react-router-dom';
import { fetchItems } from './reducer/integral-actions';

const IntegralCard = () => {
  const navigate = useNavigate();

  const PageContext = usePageContext();
  const PageAction = useMemo(() => {
    return {
      addRecord: PageContext.addRecord,
      queryParams: PageContext.queryParams,
      showSider: PageContext.showSider,
      setShowSider: PageContext.setShowSider,
      exportRecord: PageContext.exportRecord,
    };
  }, [PageContext]);

  const { useDispatch } = useStoreContext();

  useEffect(() => {
    useDispatch(fetchItems, PageAction.queryParams);
  }, [PageAction.queryParams]);

  return (
    <div className='flex flex-col gap-y-4 flex-1'>
      <Card
        bordered={false}
        className='shadow-xl z-[1]'
        title={
          <Space>
            <ButtonGroup>
              <Button>积分总览</Button>
            </ButtonGroup>
          </Space>
        }
        headerExtraContent={
          <Space>
            <Button
              theme='solid'
              className='bg-emerald-500 hover:!bg-emerald-600'
              icon={<IconDownloadStroked />}
              onClick={() => {
                PageAction.exportRecord();
              }}
            >
              导出
            </Button>
          </Space>
        }
      >
        <IntegralFilter />
      </Card>
      <Card bordered={false} className='z-10'>
        <IntegralTable />
      </Card>
    </div>
  );
};

export default IntegralCard;
